<template>
	<view style="height: 100%;">
		<div style="height: 50rpx;background:#fff"></div>
				<div class="header">
					<div class="back center" @click="back">
						<image src="/static/icon/back.png" mode="widthFix" class="w-20"></image>
					</div>
					{{$t('绑定公司')}}
				</div>
		<view class="order_tabs">
			<view class="item" v-for="(item,index) in tabsData" :class="tabIndex == index?'hover':''" :key="index" @click="clickTabs(index)">
				{{item}}
				<u-badge  :value="applyDot" :absolute="true" :offset="[8,-28]" v-if="index == 1"></u-badge>
			</view>
		</view>
		<view class="invited_items" v-if="tabIndex==0">
			<view class="invited_item">
				<view class="title">
					{{$t('绑定公司')}} 
				</view>
				<view class="info_text">
					<input v-model="remarkID" class="info_input" :placeholder="`${$t('请输入公司名称')}/${$t('公司')}ID`"  />
					
				</view>
			</view>
			<view class="invited_item">
				<view class="title">
					{{$t('情况说明')}}
				</view>
				<view class="info_text">
					<u-textarea v-model="remarkValue" :customStyle="{background: '#F6F7FB'}" height="200rpx" border="none"></u-textarea>
				</view>
			</view>
			
			<view class="invited_item">
				<view class="title">
					{{$t('附件')}}
				</view>
				<view class="info_text">
					<uv-upload
						:fileList="fileList1" 
						name="1" 
						multiple 
						:maxCount="1" 
						@afterRead="afterRead" 
						@delete="deletePic" 
						width="90rpx" 
						height="90rpx">
						<image v-if="img!=''" 
							class="ico_ph"
							:src="img" 
							mode="widthFix" 
							style="width: 90rpx;height: 90rpx;"
						></image>
					</uv-upload>
				</view>
			</view>
			

			
			<view class="invited_item" >
				<text v-if="apply_bind_item&&apply_bind_item.bind"> {{$t('申请绑定')}}:{{apply_bind_item.bind.username}}，
					{{$t('状态')}}:
					<text v-if="apply_bind_item.status==1">{{$t('申请中')}}</text> 
					<text v-if="apply_bind_item.status!=1">
						<block v-if="apply_bind_item.bind_user_id==0">
							<text>
								<text v-if="apply_bind_item.status==2">{{$t('已解绑')}}</text> 
								<text v-if="apply_bind_item.status==3">{{$t('已拒绝')}}</text>
							</text>
						</block>
						<block v-if="apply_bind_item.bind_user_id!=0">
							<text><text v-if="apply_bind_item.status==2">{{$t('已同意')}}</text> 
							<text v-if="apply_bind_item.status==3">{{$t('已拒绝')}}</text></text>
						</block>
					</text>
					 
				</text>
			</view>
			
		</view>
		<view class="invited_items1" v-if="tabIndex==1">
			<mescroll-uni :fixed="false" ref="mescrollRef"  @init="mescrollInit" @down="downCallback" @up="upCallback" :down="downOption"  :up="upOption">
			<view class="invited_item1" v-for="(item,index) in invitedList" :key="item.id">
				<view class="flex" style="width: 90%;" @click="invitedJump(item)">
					<view class="invited_img">
						<image v-if="item.request_user.avatar" style="width: 100%;height: 100%;" :src="getImageUrl(item.request_user.avatar)"></image>
						<image v-if="!item.request_user.avatar" style="width: 100%;height: 100%;" src="/static/img/touxiang.png"></image>
					</view>
					<view class="invited_text" style="font-size: 28rpx;">{{item.request_user.username}}</view>
				</view>
				<u-icon name="minus-circle-fill" color="#D8D8D8" size="40rpx" @click="invitedJumpDel(item.id)"></u-icon>
			</view>
			</mescroll-uni>
		</view>
		
		
		
		
		<view class="footer_none"></view>
		<view class="footer_btn" v-if="tabIndex==0">
			<u-button type="primary"  class="btn customStyle" :text="apply_bind_item? $t('重新绑定'): $t('确定绑定')" :loading="submit_loading" :disabled="submit_loading" @click="submit_sub"></u-button>
		</view>
	</view>
</template>

<script>
	import { transportList ,que_bind,invite_bind,invite_del,apply_bind} from '@/api/driver'
	import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
	export default {
		mixins: [MescrollMixin], 
		data() {
			return {
				fileList1:[],
				img:'',
				IMAGE_URL: 'https://gluz-oss.oss-cn-beijing.aliyuncs.com/',
				
				tabsData: [this.$t('主动绑定'),this.$t('被邀请')],
				MAGE_URL: 'https://gluz-oss.oss-cn-beijing.aliyuncs.com',
				tabIndex: 0,
				radiovalue: '',
				orderIndex: 0,
				remarkValue:'',
				submit_loading:false,
				invitedList:[],
				remarkID:'',
				downOption:{
					textLoading:this.$t('加载中'),
					textSuccess:this.$t('加载成功'),
					textInOffset: this.$t('下拉刷新'), 
					textOutOffset: this.$t('释放更新'), 
				},
				driver_jl_id:'',
				upOption:{
					page: {
						num: 0, 
						size: 10, 
						time: null
					},
					noMoreSize: 4,
					auto: true, 
					textNoMore:this.$t('没有更多数据'),
					empty: {
						tip: this.$t('暂无相关数据')
					}
				},
				
				apply_bind_item:'',
				applyDot: 0,
			}
		},
		onLoad(options) {
			this.driver_jl_id=options.id
			this.tabIndex = options.tabIndex;
			window.onNativeShow = () => {
				this.apply_bind_list()
			}
			this.apply_bind_list()
		},
		onShow() {
		},
		methods: {
			// 删除图片
			deletePic(event) {
				this[`fileList${event.name}`].splice(event.index, 1)
				this.img = ''
			},
			getImageUrl(url = '') {
				console.log(url)
				if(url.indexOf('://') > -1) {
					return url
				} else {
					return this.IMAGE_URL + url
				}
			},
			// 新增图片
			async afterRead(event) {
				// 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
				let lists = [].concat(event.file)
				let fileListLen = this[`fileList${event.name}`].length
				lists.map((item) => {
					this[`fileList${event.name}`].push({
						...item,
						status: 'uploading',
						message: '上传中'
					})
				})
				for (let i = 0; i < lists.length; i++) {
					const result = await this.uploadFilePromise(lists[i].url)
					let item = this[`fileList${event.name}`][fileListLen]
					this[`fileList${event.name}`].splice(fileListLen, 1, Object.assign(item, {
						status: 'success',
						message: '',
						url: result
					}))
					fileListLen++
				}
				
				console.log(this.fileList1);
				
			},
			uploadFilePromise(url) {
				var that = this;
				return new Promise((resolve, reject) => {
					let a = uni.uploadFile({
						url: 'https://app.gluz.com.cn/api/common/upload', // 仅为示例，非真实的接口地址
						filePath: url,
						name: 'file',
						formData: {
							user: 'test'
						},
						success: (res) => {
							var json = JSON.parse(res.data)
							that.img = json.data.url
							setTimeout(() => {
								resolve(res.data.data)
							}, 1000)
						}
					});
				})
			},
			back() {
				// uni.navigateBack()
				this.cback()
			},
			apply_bind_list(){
				var that = this
				apply_bind({user_id:uni.getStorageSync('user_id')}).then((res) => {
					that.apply_bind_item = res.data.data.data
					that.remarkID = that.apply_bind_item.bind.id
					that.remarkValue = that.apply_bind_item.remark.remark
					that.img = that.apply_bind_item.image
					that.fileList1.push({
						url:that.IMAGE_URL+that.apply_bind_item.image
					})
				})
			},
			clickTabs(index){
				this.tabIndex = index
			},
			invitedJump(v_item){
				uni.navigateTo({
					url: '/pages/bindingCompany/invited?dirverInfor='+JSON.stringify(v_item) 
				});
			},
			
			submit_sub(){
				var that = this
				this.submit_loading=true
				setTimeout(()=>{
					this.submit_loading=false
				},1000)
				que_bind({
					id:this.driver_jl_id,
					user_id:this.remarkID,
					remark:this.remarkValue,
					keyword:this.remarkID,
					image:this.img,
					
				}).then((res) => {
					that.apply_bind_list()
					uni.showToast({
					  title: this.$t('操作成功'),
					  icon: 'none'
					});
					setTimeout(function(){
						uni.$emit('refreshIndex', true)
						uni.navigateBack({
						  delta: 1,
						})
					},2000)
					
				}).catch((error) => {
					uni.showToast({
					  title: this.$t('绑定失败'),
					  icon: 'none'
					});
				})
			},
			downCallback(){
				if(this.tabIndex==0)return false
				this.invitedList=[]
				this.mescroll.resetUpScroll()
			},
			upCallback(page) {
				if(this.tabIndex==0)return false
				setTimeout(()=>{
					invite_bind({
						register_id:uni.getStorageSync('user_id'),current:1,currentCheck:1
					}).then((res) => {
						console.log(this.$t('被邀请'),res.data.data)
						if(!res.data.data.data)res.data.data.data=[];
						this.applyDot = res.data.data.count;
						this.mescroll.endBySize(res.data.data.data.length,res.data.data.count); 
						if(page.num == 1) this.invitedList = [];
						this.invitedList=this.invitedList.concat(res.data.data.data); 
					})
				},500)
			},
			invitedJumpDel(v_id){
				uni.showModal({
					title: this.$t('温馨提示'),
					content: this.$t('是否删除该公司邀请信息'),
					showCancel:true,
					success: (res) => {
						if (res.confirm) {
							invite_del({id:v_id}).then((res) => {
								console.log(this.$t('删除公司邀请信息'),res)
								this.tabIndex==1
								this.invitedList=[]
								this.mescroll.resetUpScroll()
							 })
						}
					}
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	page{
		background-color: #F6F7FB;
	}
.header {
	font-size: 34rpx;
	height: 100rpx;
	line-height: 100rpx;
	font-weight: bold;
	text-align: center;
	position: relative;
	padding-top: var(--status-bar-height);
	background:#fff;
}

.back {
	position: absolute;
	width: 70rpx;
	height: 70rpx;
	top: 18rpx;
}

	.customStyle{
		border: none;
	}
	.invited_img{
		width: 44rpx;
		height: 44rpx;
		overflow: hidden;
		margin-right: 10px;
		border-radius: 50%;
		overflow: hidden;
	}
	.invited_text{
		width: 90%;
		overflow: hidden;
		font-weight: 400;
		display: -webkit-box;
		-webkit-line-clamp: 1;
		-webkit-box-orient: vertical;
	}
	.info_input{
		font-size: 26rpx;
		line-height: 40px;
	}
	.invited_items{
		margin: 20rpx 24rpx;
		background: #fff;
		border-radius: 20rpx;
	}
	.invited_items1{
		margin: 20rpx 24rpx;
		border-radius: 20rpx;
		flex-grow: 1;
		height: calc(100vh - 100px);
		overflow: hidden;
	}
	.invited_item1{
		display: flex;
		justify-content: space-between;
		align-items: center;
		height: 96rpx;
		padding: 0 10px;
		width: 100%;
		margin-bottom: 20rpx;
		background: #fff;
		border-radius: 18rpx;
	}
	
	.invited_item{
		padding:0 24rpx 30rpx;
		.title{
			color: #1D1D1D;
			font-size: 28rpx;
			font-weight: 600;
			line-height: 28rpx;
			padding:34rpx 0 24rpx;
		}
		.info_text{
			border-radius: 18rpx;
			background: #F6F7FB;
			padding:20rpx 24rpx;
			color: #333;
			font-size: 26rpx;
			line-height: 40rpx;
			overflow: hidden;
		}
	}
.order_tabs{
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: 86rpx;
	background: #fff;
	padding:0 140rpx;
	.item{
		color: #8C8C8C;
		font-size: 28rpx;
		line-height: 86rpx;
		position: relative;
		&.hover{
			color: #278AFF;
			font-weight: 600;
			&::after{
				content: '';
				position: absolute;
				left:50%;
				bottom: 13rpx;
				width: 50rpx;
				height: 4rpx;
				border-radius: 50rpx;
				background: #278AFF;
				margin-left: -25rpx;
			}
		}
	}
}
.footer_btn{
	position: fixed;
	left:0;
	bottom: 0;
	right: 0;
	z-index: 9;
	background: #fff;
	padding:30rpx 30rpx 60rpx;
	box-shadow: 0 0 10rpx rgba(0, 0, 0, 0.05);
	.btn{
		width: 100%;
		height: 90rpx;
		border-radius: 50rpx;
		background: linear-gradient(90deg, #278AFF 0%, #66D6E2 100%);
		color:#fff;
		text-align: center;
		line-height: 90rpx;
		font-size: 32rpx;
		font-weight: 600;
	}
	.btn_red{
		width: 100%;
		height: 110rpx;
		background: #FFB6B6;
		color:#FF1F1F;
		text-align: center;
		line-height: 110rpx;
		font-size: 32rpx;
	}
}
</style>
